<template>
  <div class="goodsBox">
    <template v-for="(item, index) in goodsArray">
      <div
        :class="
          goodsShowType == 2
            ? 'goodItem1'
            : goodsShowType == 1
            ? 'goodItem2'
            : 'goodItem1'
        "
        :key="index"
        :style="{
          minWidth:goodsShowType == 1?'100%': goodsShowType == 2 && styleType == 8 ? '163px' : '113px',
          width:goodsShowType == 1?'100%':  goodsShowType == 2 && styleType == 8 ? '163px' : '113px',
        }"
      >
        <div
          class="goodPic"
          :style="{
            minWidth: goodsShowType == 1?'100px': goodsShowType == 2 && styleType == 8 ? '163px' : '113px',
            width: goodsShowType == 1?'100px':  goodsShowType == 2 && styleType == 8 ? '163px' : '113px',
            height:goodsShowType == 1?'100px': goodsShowType == 2 && styleType == 8 ? '163px' : '113px',
            minHeight:goodsShowType == 1?'100px':  goodsShowType == 2 && styleType == 8 ? '163px' : '113px',
          }"
        >
          <img
            src="@/assets/images/diy/default_img.png"
            alt=""
            v-if="item.cover_pic == ''"
          />
          <img :src="item.cover_pic" alt="" v-else />
        </div>
        <div class="goodInfo">
          <span class="goodName">
            {{ item.name }}
          </span>
          <span class="goodCount"> 销量{{ item.virtual_sales }} </span>
          <div class="price-box">
            <div class="price">
              <div class="new">
                <span>￥</span>
                <span>{{ item.price }}</span>
              </div>
              <div class="old">{{ item.original_price }}</div>
            </div>
            <div class="buy-btn">
              <i class="iconfont icon-weibiaoti-12"></i>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    propsData: {
      type: Object,
      default: {},
    },
    goodsList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  mixins: [],
  components: {},
  data() {
    return {
      goods: [
        {
          name: "商品奥术大师大所大多阿萨德啊实打实大声道阿萨德1",
          price: "2.22",
          original_price: "4.33",
          cover_pic: "",
          virtual_sales: 99,
        },
        {
          name: "商品奥术大师大所大多阿萨德啊实打实大声道阿萨德1",
          price: "2.22",
          original_price: "4.33",
          cover_pic: "",
          virtual_sales: 99,
        },
        {
          name: "商品奥术大德啊实打实大声道阿萨德1",
          price: "2.22",
          original_price: "4.33",
          cover_pic: "",
          virtual_sales: 99,
        },
        {
          name: "商品奥术大德啊实打实大声道阿萨德1",
          price: "2.22",
          original_price: "4.33",
          cover_pic: "",
          virtual_sales: 99,
        },
      ],
    };
  },
  mounted() {},
  watch: {},
  computed: {
    goodsShowType() {
      return this.propsData.params.goodsShowType;
    },
    goodsArray() {
      let arr =
        this.goodsList && this.goodsList.length > 0
          ? this.goodsList
          : this.goods;
      return arr;
    },
    styleType() {
      return this.propsData.params.styleType || "1";
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.goodsBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .goodItem1 {
    margin-bottom: 10px;
    .goodPic {
      width: 100%;
      border-radius: 5px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .goodInfo {
      // height: 100%;
      padding: 7px 0;
    }
  }
  .goodItem2 {
    width: 100%;
    display: flex;
    margin-bottom: 14px;
    .goodPic {
      width: 100px;
      height: 100px;
      min-width: 100px;
      border-radius: 5px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .goodInfo {
      position: relative;
      height: 100%;
      padding-bottom: 14px;
      flex: auto;
      margin-left: 14px;
    }
    .goodInfo::before {
      position: absolute;
      bottom: 0px;
      right: -16px;
      content: "";
      width: calc(100% + 16px);
      height: 1px;
      background-color: #f5f6f7;
    }
  }
  .goodInfo {
    display: flex;
    flex-direction: column;
    .goodName {
      min-height: 39px;
      font-size: 14px;
      color: #262626;
      font-weight: 600;
      font-family: PingFang SC;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .goodCount {
      margin: 2px 0;
      font-size: 12px;
      color: #8c8c8c;
      font-family: PingFang SC;
    }
    .price-box {
      width: 100%;
      display: flex;
      align-items: flex-end;
      flex-wrap: wrap;
      justify-content: space-between;
      .price {
        flex: 1;
        display: flex;
        flex-direction: column;
        .new {
          display: flex;
          align-items: baseline;
          color: #f0250e;
          font-weight: 600;
          font-family: PingFang SC;
          span:nth-child(1) {
            font-size: 12px;
          }
          span:nth-child(2) {
            font-size: 18px;
          }
        }
        .old {
          font-family: PingFang SC;
          font-size: 12px;
          text-decoration: line-through;
          color: #888;
          margin-left: 5px;
        }
      }
      .buy-btn {
        width: 21px;
        height: 21px;
        background: #f0250e;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        margin-left: 10px;
        .iconfont {
          font-size: 12px;
          color: #ffffff;
        }
      }
    }
  }
}
.add-padding-top {
  padding-top: 14px;
}
</style>